<template>
	<div class="activity-list">
		<detail-item v-for="(item, index) in listData" :key="index" :item="item" />
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { Decimals } from '@/utils/decimal'
import DetailItem from '@/views/activity/components/rewards/detail-item.vue'
import { useActivityStore } from '@/store'

const activityStore = useActivityStore()
const listData = computed(() =>
	activityStore.status.lockBonus.list
		.map((item: any) => {
			return {
				...item,
				amount: Decimals.sub(item.totalAmount, item.receivedAmount),
				updatedAt: item.clearTime
			}
		})
		.filter((i: any) => i.amount && i.isExpiredAt)
)

onMounted(() => {
	activityStore.getProgressiveData()
})
</script>

<style lang="scss" scoped></style>
